﻿
@{
    ViewBag.Title = "Analyse";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="layui-form-item" style="position:relative">
    <label class="layui-form-label" style="width:100px;">单行选择框</label>
    <div class="layui-input-inline" style="position:absolute;top:10px">
        <select name="year" id="year" lay-filter="year">
        </select>
    </div>
</div>
<div id="main" style="width: 600px;height:400px;">

</div>

<script type="text/javascript">
    window.onload = function () {
        var userdata
        const currentYear = new Date().getFullYear();

        // 获取<select>元素
        const selectElement = document.getElementById('year');

        // 往前推5年，生成选项
        for (let i = 0; i < 6; i++) {
            const year = currentYear - i; // 计算年份
            const option = document.createElement('option'); // 创建新的<option>元素
            option.value = year; // 设置value
            option.textContent = year; // 设置显示文本

            // 如果是当前年份，设为默认选中
            if (year === currentYear) {
                option.selected = true;
            }

            // 将<option>元素添加到<select>中
            selectElement.appendChild(option);
        }
        // 监听选择事件
        selectElement.addEventListener('change', function (event) {
            // 获取选中的值
            var selectedYear = event.target.value;
           var newcounts1 = userdata.ResultList.find(item => item.Year == selectedYear)?.Counts || [];
           var newcounts2 = userdata.ResultList2.find(item => item.Year == selectedYear)?.Counts || [];
            myChart.setOption({
                series: [
                    {
                        type: 'line',
                        name: '成功数量',
                        data: newcounts2
                    },
                    {
                        type: 'line',
                        name: '全部数量',
                        data: newcounts1
                    }
                ]
            });
        });
        var data1='@ViewBag.data';
        var myChart = echarts.init(document.getElementById('main'));
        $.get('/manager/singledata?data=' + encodeURIComponent(JSON.stringify(data1))).done(function (data) {
            //console.log(data.data);
            userdata = data.data;
            var counts1 = data.data.ResultList.find(item => item.Year === 2025)?.Counts || [];
             var counts2 = data.data.ResultList2.find(item => item.Year === 2025)?.Counts || [];
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'cross' }
                },
                legend: {},
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        data: [
                            '1月',
                            '2月',
                            '3月',
                            '4月',
                            '5月',
                            '6月',
                            '7月',
                            '8月',
                            '9月',
                            '10月',
                            '11月',
                            '12月'
                        ]
                    }
                ],
                yAxis: [

                    {
                        type: 'value',
                        name: '发展产妇数量',
                        min: 0,
                        max: 12,
                        position: 'left',
                    }
                ],
                series: [
                    {
                        type: 'line',
                        name: '成功数量',
                        data: counts2
                    },
                    {
                        type: 'line',
                        name: '全部数量',
                        data: counts1
                    }
                ]
            };
            myChart.setOption(option);
        });

    }
      // 使用刚指定的配置项和数据显示图表。

</script>

